<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>user.index</title>
	<link rel="stylesheet" href="/plug-in/AmazeUI-2.4.2/assets/css/amazeui.min.css">
	<script type="text/javascript" charset="utf-8" src="/plug-in/jquery-3.1.0.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="/plug-in/layer-v2.4/layer/layer.js"></script>
	<script type="text/javascript" charset="utf-8" src="/plug-in/AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="/plug-in/hprose/hprose.js"></script>
	<script type="text/javascript" charset="utf-8" src="/plug-in/cnynld.hprose..js"></script>
	<script type="text/javascript" charset="utf-8" src="/plug-in/vue.min.js"></script>
	<style>
		*{ margin: 0; padding: 0; }
		ul, ol, li { margin: 6px; }
		html, body { height: 100%; }
	</style>



</head>

<body style="overflow: hidden;widht:100%;height: 100%;">

	<div style="float:left;width:70%;height: 100%; margin-left: 10px;">
		<div class="am-g">
			<div class="am-u-md-6 am-u-sm-centered">
				<b>添加/修改</b>
				<form class="am-form">
					<fieldset class="am-form-set">
						<input type="text" placeholder="取个名字吧" v-model="current.name">
						<div class="am-form-group">
							<label class="am-radio-inline">
								<input type="radio"  value="true" v-model="current.sex"> 男
							</label>
							<label class="am-radio-inline">
								<input type="radio" value="false" v-model="current.sex"> 女
							</label>
						</div>
						<input type="number" placeholder="年龄呢?" v-model="current.age">
						<input type="text" placeholder="电话多少.." v-model="current.phone">
						<input type="text" placeholder="把qq也交出来.." v-model="current.qq">
					</fieldset>
				</form>
				<button class="am-btn am-btn-primary" @click="save">保存吧!</button><!-- but 放在form竟然会跳转....醉了 -->
				<button class="am-btn am-btn-primary" @click="empty">清空!</button>
			</div>
		</div>

		<b>列表:</b>
		<form class="am-form-inline" role="form">
			<div class="am-form-group">
				查询：
				<input type="text" class="am-form-field" placeholder="姓名" v-model="search_query.name">
			</div>
			<div class="am-form-group">
				男：<input type="radio" name="doc-radio-1" value="男" v-model="search_query.sex">
				女：<input type="radio" name="doc-radio-1" value="女" v-model="search_query.sex">
			</div>
			<div class="am-form-group">
				年龄:
				<input type="number" class="am-form-field" placeholder="年龄" v-model="search_query.age"> ~ <input type="number" class="am-form-field" placeholder="年龄" v-model="search_query.age1">
			</div>
			<div class="am-form-group">
				QQ:
				<input type="text" class="am-form-field" placeholder="QQ" v-model="search_query.qq">
			</div>
			<div class="am-form-group">
				<input type="button" class="am-btn am-btn-primary" @click="search('$and')" value="且查询">
				<input type="button" class="am-btn am-btn-primary" @click="search('$or')" value="或查询">
			</div>
		</form>
		<div style="width: 100%; height: 55%; overflow: auto;">
			<table class="am-table am-table-hover am-table-bordered am-table-centered" >
				<thead>
				<tr>
					<th @click="sort('name')">名称</th>
					<th @click="sort('sex')">性别</th>
					<th @click="sort('age')">年龄</th>
					<th @click="sort('phone')">电话</th>
					<th @click="sort('qq')">QQ</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="item in query.data" @click="current = item">
					<td>{{ item.name }}</td>
					<td>{{ item.sex == 'true' ? "男" : "女" }}</td>
					<td>{{ item.age }}</td>
					<td>{{ item.phone }}</td>
					<td>{{ item.qq }}</td>
				</tr>
				</tbody>
			</table>
		</div>
		<ul class="am-pagination am-pagination-centered">
			<li v-bind:class="{'am-disabled': isprev }"><a href="#" @click="query.page = query.page - 1">&laquo; Prev</a></li>

			共{{ query.pages }}页，当前第{{ query.page }}页，每页
			<select v-model="query.size" @change="getlist">
				<option>10</option>
				<option>25</option>
				<option>50</option>
				<option>100</option>
			</select>
			条
			<li v-bind:class="{'am-disabled': isnext }"><a href="#" @click="query.page = query.page + 1">Next &raquo;</a></li>
		</ul>

	</div>

	<div style="float:left;width:29%;height: 100%;overflow: auto">
		<b>当前对象：</b>
		<table class="am-table am-table-bordered">
			<thead>
			<tr><th>名称</th><th>值</th></tr>
			</thead>
			<tbody>
			<tr v-for="value in current">
				<td>{{$key}}</td><td>{{ toJson(value) }}</td>
			</tr>
			</tbody>
		</table>
		<b>查询对象：</b>
		<table class="am-table am-table-bordered">
			<thead>
				<tr><th>名称</th><th>值</th></tr>
			</thead>
			<tbody>
				<tr v-for="value in query">
					<td>{{$key}}</td><td>{{ toJson(value) }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript" charset="utf-8" src="/view/user/index.js"></script>
</html>